<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<wicket:head>
	<title>Wicket - jQuery UI</title>
</wicket:head>
</head>
<body>
    <wicket:extend>
        <h2>Welcome!</h2>
        <div>
            Welcome to the demo site of the <b>Wicket - jQuery UI</b> API.<br/>
            <br/>
            The goal of this API is to provide a bridge between <a href="http://wicket.apache.org/" target="_new">Apache Wicket</a> and <a href="http://jqueryui.com/" target="_new">jQuery UI</a>.<br/>
            The 'core' provides all jQuery UI built-in components.<br/>
            <br/>
            Useful links:
            <ul>
	            <li>
	            	Source / Issues: <a target="ext" href="https://github.com/sebfz1/wicket-jquery-ui/">https://github.com/sebfz1/wicket-jquery-ui</a>
	            	<span class="ui-icon ui-icon-extlink" style="display: inline-block;"></span>
	            </li>
	            <li>
	            	Changelogs: <a target="ext" href="https://github.com/sebfz1/wicket-jquery-ui/wiki/_pages">https://github.com/sebfz1/wicket-jquery-ui/wiki</a>
	            	<span class="ui-icon ui-icon-extlink" style="display: inline-block;"></span>
	            </li>
	            <li>
	            	Questions: <a target="ext" href="http://groups.google.com/group/wicket-jquery-ui/">http://groups.google.com/group/wicket-jquery-ui</a>
	            	<span class="ui-icon ui-icon-extlink" style="display: inline-block;"></span>
	            </li>
            </ul>
        </div>
        <br/>
        <h3>About this demo site</h3>
        <div>
        	This demo site aims to present all behaviors &#38; widgets (components) the API provides, including all jQuery UI components you may find on the <a href="http://jqueryui.com/demos/" target="jquery-ui">jQuery UI demo site</a>.<br/>
        	<br/>
        	For each main component class in the left's list, you may find several other related components (or other samples), including wicket-jquery-ui original ones (like message dialog-boxes or secured-button).<br />
        </div>
        <br/>
        <h3>Getting started</h3>
        <div>
            In order to get started using this API, you may download appropriate jar(s) or set a maven dependency.<br/>
            <h4>Download jar(s)</h4>
            <div>
                If you are not using maven, you need to download the core jar here:<br/>
                <a href="http://central.maven.org/maven2/com/googlecode/wicket-jquery-ui/">http://central.maven.org/maven2/com/googlecode/wicket-jquery-ui/</a><br/>
                <br/>
                You may also download other jars as required (ie: <code>wicket-kendo-ui</code>). Once done, just include the jar(s) in your project's build path.
            </div>
            <h4>Using Maven</h4>
            <div>
                <pre>
&lt;dependency&gt;
    &lt;groupId&gt;com.googlecode.wicket-jquery-ui&lt;/groupId&gt;
    &lt;artifactId&gt;wicket-jquery-ui&lt;/artifactId&gt;
    &lt;version&gt;6.14.0&lt;/version&gt; &lt;!-- <i>or</i> 1.5.10 --&gt;
&lt;/dependency&gt;
                </pre>
                If the version you specified is 'snapshot', you may define this repository:
                <pre>
&lt;repositories&gt;
	&lt;repository&gt;
		&lt;id&gt;sonatype-snapshots&lt;/id&gt;
		&lt;name&gt;Sonatype Snapshots Repository&lt;/name&gt;
		&lt;url&gt;https://oss.sonatype.org/content/repositories/snapshots/&lt;/url&gt;
		&lt;snapshots&gt;
			&lt;enabled&gt;true&lt;/enabled&gt;
		&lt;/snapshots&gt;
	&lt;/repository&gt;
&lt;/repositories&gt; 
				</pre>
            </div>
            <h4>Setting up the HTML markup</h4>
            <div>
                jQuery UI needs a CSS to work. No jQuery UI CSS has been shipped in the API, so you are free to use the one you wish.<br/>
                You can get your own CSS at <a href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a>, and put it (the <code>CSS</code> folder only) into your website.<br/>
                <br/>
                The base template page is the following: (you might change the CSS href accordingly)
                <pre>
&lt;!DOCTYPE html&gt;
&lt;html xmlns:wicket="http://wicket.apache.org"&gt;
&lt;head&gt;
    &lt;!-- jQuery UI --&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/<i>ui-lightness</i>/jquery-ui-1.10.4.custom.min.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
                </pre>
                It is highly recommended to strip wicket tags from the HTML rendering.
                <pre>
/**
 * @see org.apache.wicket.Application#init()
 */
@Override
public void init()
{
	super.init();

	this.getMarkupSettings().setStripWicketTags(true); //IMPORTANT!
}
                </pre>
            </div>
            <h4>Setting up the HTML markup, for Kendo UI</h4>
            <div>
                Kendo UI also needs CSSs to work. You need to download your own copy of Kendo UI: <a href="http://www.telerik.com/download/kendo-ui-web-open-source">http://www.telerik.com/download/kendo-ui-web-open-source</a>.<br/>
                <br/>
                Once done, you have to copy <code>kendo.common.min.css</code> and <code>kendo.<i>choosen_theme</i>.min.css</code> in into you webapp, as well as the corresponding theme folder and the "<code>texture</code>" folder.<br/>
                <br/>
                The base template page is then the following: (you might change the CSS href accordingly)
                <pre>
&lt;!DOCTYPE html&gt;
&lt;html xmlns:wicket="http://wicket.apache.org"&gt;
&lt;head&gt;
    &lt;!-- Kendo UI --&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/kendo/kendo.common.min.css" media="all" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/kendo/kendo.default.min.css" media="all" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
                </pre>
            </div>
            <h4>You are now ready to use wicket-jquery-ui!</h4>
            <div>
            Look at the samples provided here to get started with the code...
            </div>
        </div>
    </wicket:extend>
</body>
</html>
